<template>
    <el-scrollbar :height="height">
        <el-menu :default-active="defaultActive" v-for="tree in queryParamTree" :key="tree">
            <template v-for="(item, index) in tree">
                <el-menu-item v-if="item.value && item.label" :index="index" @click="handleClick(item)"
                    style="height: 35px;" :key="item.value + index">
                    <span v-if="item.icon" class="fixed-icon" >
                    <svg-icon :icon-class="item.icon" :color="item.color" style="margin-right: 10px;" />
                    </span>
                    <!-- <span>{{ item.label }}</span> -->
                    <span class="menu-label" :class="{ 'truncate': item.label.length > 8 }">
                        {{ item.label }}
                        <!-- 超长时显示省略号 -->
                        <span v-if="item.label.length > 8" class="ellipsis">...</span>
                    </span>
                </el-menu-item>
                <el-divider v-if="!item.value && !item.label" style="width: 94%;margin-left:3%;"
                    :key="'divider-' + index" />
                <div v-if="!item.value && item.label"
                    style="height: 30px;opacity: 0.5;font-size: 14px;line-height: 30px;margin-left:10px;"
                    :key="'group-' + index">
                    <span class="menu-label" :class="{ 'truncate': item.label.length > 8 }">
                        {{ item.label }}
                        <!-- 超长时显示省略号 -->
                        <span v-if="item.label.length > 8" class="ellipsis">...</span>
                    </span>
                    <!-- {{ item.label }} -->
                </div>
            </template>
        </el-menu>
    </el-scrollbar>
</template>
  
<script setup>
const props = defineProps({
    queryParamTree: {
        type: Array,
        required: true,
        default: () => []
    },
    defaultActive: {
        type: Number,
        default: 1
    },
    height: {
        type: String,
        default: "calc(100vh - 105px)"
    }
})

const emit = defineEmits(['menu-query'])

const handleClick = (item) => {
    emit('menu-query', item)
}
</script>
  
<style>
/* 基础样式：文本单行显示 */
.menu-label {
  display: inline-block;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 120px; /* 限制最大宽度，可根据实际布局调整 */
}

/* 超长时强制截断（配合 JavaScript 逻辑） */
.truncate {
  max-width: 100%; /* 重置宽度，避免与父元素冲突 */
}

/* 手动添加的省略号样式（可选） */
.ellipsis {
  color: #999; /* 省略号颜色 */
  margin-left: 2px; /* 与正文间隔 */
}

/* 固定图标样式（可选） */
.fixed-icon {
  display: inline-block;
  width: 20px;
  vertical-align: middle;
}
</style>